<!-- note that if you want to use render(), then you SHOULD NOT leave <template> here! -->
<!--<template>-->
    <!--<div>This is json formatter!</div>-->
<!--</template>-->

<script>
    export default {
        name: 'json-formatter',
        props: {
            // will only accept a json Object
            jsonData: Object|Array,
            required: true,
            default: {
                ['<键>']: '<没有数据哎~>',
            },
        },
        render: function (createElement) {
            var elements, node;
            // console.info('render function in "json-formatter" is called!');

            if (this.jsonData instanceof Array) {
                // array
                console.log('json-formatter got an array: %o', this.jsonData);
                elements = [];
                for(var i = 0; i < this.jsonData.length; i++) {
                    node = this.jsonData[i];
                    if (typeof node !== 'object') {
                        elements.push(createElement(
                            'p',
                            {
                                class: ['json-atom'],
                            },
                            typeof node === 'string' ? `"${node}",`
                                : `${node},`
                        ));
                    } else if (node === null) {
                        elements.push(createElement(
                            'p',
                            {
                                class: ['json-null'],
                            },
                            'NULL'
                        ));
                    } else {
                        // recursive
                        elements.push(createElement(
                            'json-formatter',
                            {
                                props: {
                                    jsonData: node,
                                }
                            }
                        ));
                    }
                }

                // createElement
                return createElement(
                    'div',
                    {
                        class: ['json-array'],
                    },
                    elements.slice(0)
                );
            } else {
                // object
                console.log('json-formatter got an object: %o', this.jsonData);
                elements = [];

                for (var key in this.jsonData) {
                    node = this.jsonData[key];
                    if (typeof node !== 'object') {
                        elements.push(createElement(
                            'p',
                            {
                                class: ['json-atom'],
                            },
                            typeof node === 'string' ? `${key}: "${node}",`
                                : `${key}: ${node},`
                        ));
                    } else if (node === null) {
                        elements.push(createElement(
                            'p',
                            {
                                class: ['json-key'],
                            },
                            [
                                key + ' --> ',
                                createElement('span', {class: ['json-null']}, 'NULL')
                            ]
                        ));
                    } else {
                        elements.push(createElement(
                            'p',
                            {
                                class: ['json-key']
                            },
                            key + ' -->'
                        ));
                        elements.push(createElement(
                            'json-formatter',
                            {
                                props: {
                                    jsonData: node,
                                }
                            }
                        ));
                    }
                }

                return createElement(
                    'div',
                    {
                        class: ['json-object'],
                    },
                    elements.slice(0)
                );
            }

        }
    };
</script>

<style scoped>

    .json-array {
        margin-left: 1em;
        margin-bottom: 0.5em;
        padding: 0.25em;
        border-left: 2px solid #99ffa3;
    }

    .json-object {
        margin-left: 1em;
        margin-bottom: 0.5em;
        padding: 0.25em;
        border-left: 1px solid #ffbab3;
    }

    .json-atom {
        margin-left: 0.25em;
        color: white;
        font-weight: bold;
    }

    .json-key {
        margin-left: 0.25em;
        color: #b3b3b3;
        font-weight: bold;
    }

    .json-null {
        margin-left: 0.25em;
        color: #99b2ca;
        font-weight: bold;
        font-style: italic;
    }
</style>